'use strict';

function TopBarCtrl($scope, $http) {
	$http.get('topBarData.json').success(function(data) {
		$scope.logOutUrl = data.logOutUrl;
		$scope.players = data.players;
		console.log($scope.players)
		console.log(data)
	});
	$scope.currentPlayer = {name: "Ingen spelare vald", id: false};
	$scope.frstr_style = {width:"300px", display:"inline"};
	$scope.click_frstr = function() {
		if ($scope.frstr_style.width === "300px") {
			$scope.frstr_style.width = "80px";
			$scope.frstr_style.display = "none";
		} else {
			$scope.frstr_style.width = "300px";
			$scope.frstr_style.display = "inline";
		}
	}
	$scope.searchedplayer = "";
	$scope.searchedplayerlist = []
		
	$scope.change_player_name = function() {
		console.log($scope.searchedplayer);
		if ($scope.searchedplayer !== undefined) {
			var data = "?beginning=" + $scope.searchedplayer;
			$http.get('filteredplayerlist.json' + data).success(function(data) {
				console.log(data)
				$scope.searchedplayerlist = data;
			});
		} else {
			$scope.searchedplayerlist = [];
		}
	}
	
	$scope.playerinfo = {};
	$scope.show_player = function(id) {
		$scope.searchedplayerlist = [];
		var data = "?id=" + id;
		$http.get('player.json' + data).success(function(data) {
			$scope.playerinfo = data;
		});
	}

	$scope.submit_message = function() {
		console.log($scope.message_text);
	}
	
	$scope.choosePlayer = function() {
		$("#playermenu").css("display", "inline").mouseleave(
				function() {
					$("#playermenu").css("display", "none")
				});
	}
	$scope.createPlayer = function() {
		$("#playercreator").css("display", "inline");
	}
	$scope.selectedPlayer = function(playerName) {
		console.log(playerName);
		$scope.currentPlayer = {name: playerName, id: false};
	}
	

	$scope.cross_types = [
	                      {name: "No_cross", selected: "solid black"},
	                      {name: "Middle_cross", selected: "solid white"},
	                      {name: "Corner_cross", selected: "solid white"},
	                     ];
	$scope.flag_colors = [
	                      {color: "FF0000", selected: "solid black"},
	                      {color: "00FF00", selected: "solid white"},
	                      {color: "0000FF", selected: "solid white"},
	                     ];
	$scope.selectedCross = $scope.cross_types[0].name
	$scope.selectedColor = $scope.flag_colors[0].color
	$scope.clickColor = function() {
		angular.forEach($scope.flag_colors, function(type){
			if (type.color === event.srcElement.id) {
				type.selected = "solid black";
			} else {
				type.selected = "solid white";
			}
		});
		$scope.selectedColor = event.srcElement.id;
		drawFlags.large("flag_selecting", $scope.selectedCross, $scope.selectedColor);
		console.log();
		console.log("Clicking the color");
	}
	$scope.clickCross = function() {
		
		angular.forEach($scope.cross_types, function(type){
			if (type.name === event.srcElement.id) {
				type.selected = "solid black";
			} else {
				type.selected = "solid white";
			}
		});
		$scope.selectedCross = event.srcElement.id;
		drawFlags.large("flag_selecting", $scope.selectedCross, $scope.selectedColor);
		console.log();
		console.log("Clicking the cross");
	}
	
	$(document).ready(function() {
		drawFlags.smallCrosses();

		var playerdataform = $("#playerdataform");
	
		//bind the `submit` event
		playerdataform.on("submit", function(event) {
				event.preventDefault();
			// serialize the form
			
			var playerName = ($("#name").val()); 
			if ($("#name").val() === "" || $("#name").val() === null) {
				alert("Hey, at least one letter, otherwise its obviously not a name")
			} else {
				var data = playerdataform.serialize();
				data = data + "&flagcolor=" + $scope.selectedColor + "&flagcross=" + $scope.selectedCross
				 // POST the data to the server using the form's action URL
				$.post(playerdataform.attr("action"), data, function(data) {
				     // Data sent, let's clear the form elements
					 playerdataform.find("#name").val("");
					 $("#playercreator").css("display", "none");
				});
			}
		});
	});
}